<template>
  <el-card shadow="always">
    <div slot="header">选课查询</div>
    <!-- card body -->
    <div class="btns">
      <div>
        <el-input placeholder="班级名称" size="mini" clearable></el-input>
        <el-input placeholder="课程名称" size="mini" clearable></el-input>
        <el-input placeholder="专业名称" size="mini" clearable></el-input>
        <el-button type="primary" size="mini" icon="el-icon-search"
          >查询</el-button
        >
      </div>
      <el-button type="success" size="mini" icon="el-icon-plus">新增</el-button>
    </div>
    <!-- {{ params }} -->
    <TablePagination
      :tableData="list"
      :table="table"
      :columns="columns"
      :pagination="pagination"
      :total="totle"
      :pageSize.sync="params.pageSize"
      :pageNo.sync="params.pageNo"
      @reload="findChooseList"
    >
      <template #day="{ row }">
        <el-tag
          v-if="row.sc_daily_score < 60"
          type="danger"
          size="mini"
          effect="dark"
          >{{ row.sc_daily_score }}</el-tag
        >
        <el-tag
          v-else-if="row.sc_daily_score < 80"
          type="warning"
          size="mini"
          effect="dark"
          >{{ row.sc_daily_score }}</el-tag
        >
        <el-tag v-else type="success" size="mini" effect="dark">{{
          row.sc_daily_score
        }}</el-tag>
      </template>
      <template #end="{ row }">
        <el-tag
          v-if="row.sc_exam_score < 60"
          type="danger"
          size="mini"
          effect="dark"
          >{{ row.sc_exam_score }}</el-tag
        >
        <el-tag
          v-else-if="row.sc_exam_score < 80"
          type="warning"
          size="mini"
          effect="dark"
          >{{ row.sc_exam_score }}</el-tag
        >
        <el-tag v-else type="success" size="mini" effect="dark">{{
          row.sc_exam_score
        }}</el-tag>
      </template>
      <template #sum="{ row }">
        <el-tag
          v-if="row.sc_score < 60"
          type="danger"
          size="mini"
          effect="dark"
          >{{ row.sc_score }}</el-tag
        >
        <el-tag
          v-else-if="row.sc_score < 80"
          type="warning"
          size="mini"
          effect="dark"
          >{{ row.sc_score }}</el-tag
        >
        <el-tag v-else type="success" size="mini" effect="dark">{{
          row.sc_score
        }}</el-tag>
      </template>
    </TablePagination>
  </el-card>
</template>

<script>
import TablePagination from "@/components/TablePagination";
import table from "./config/table";
import columns from "./config/columns";
import pagination from "./config/pagination";
import { selectChooseList } from "@/api/choose";
export default {
  components: {
    TablePagination,
  },
  data() {
    return {
      table,
      columns,
      pagination,
      // =======
      list: [],
      totle: 0,
      params: {
        pageNo: 1,
        pageSize: 10,
        course_name: "",
        major_name: "",
        class_name: "",
      },
    };
  },
  methods: {
    async findChooseList() {
      try {
        let { data } = await selectChooseList(this.params);
        this.list = data.list || [];
        this.totle = data.total || 0;
      } catch (error) {
        console.error("获取选课列表失败:", error);
        this.$message.error("获取选课列表失败");
      }
    },
    changeSize(pageSize) {
      this.params.pageNo = 1;
      this.params.pageSize = pageSize;
      this.findChooseList();
    },
    changePage(pageNo) {
      this.params.pageNo = pageNo;
      this.findChooseList();
    },
  },
  created() {
    this.findChooseList();
  },
};
</script>
